先說説 CDN 是什麼吧，以 JQuery 為例，如果我們想在網頁上使用它，就得在 HTML 中使用 Script 將 JQuery 的程式碼載入：
<html>
<body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</body>
</html>
然後現今的前端常常這邊用一些輪播、那邊用一些燈箱，所以 CDN 就會長得到處都是：
<html>
<body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- lightgallery.js v1.6.6 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.6/css/lightgallery.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.6/js/lightgallery.min.js"></script>
</body>
</html>
CDN 只要一多，HTML 就會顯得很雜亂，有時候更會搞不清楚哪些到底會用到，哪些不會？
除了處理 JS 外，
今天讓我們先學習如何使用 Webpack。
開啟命令提示字元，先用 cd 指令將路徑指定到專案的資料夾後輸入：
npm init -y
輸入完後跟目錄底下會出現一個 package.json，裡面會描述專案資訊：
建立專案後，便可繼續安裝 Webpack 及他的 cli 工具：
npm install webpack webpack-cli --save-dev
直接在專案的根目錄新增一個檔案，檔名叫 webpack.config.js，內容如下：
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, './dist/'),
}
};
entry 是進入點，Webpack 會從 ./src/index.js 開始編譯，並尋訪所有需要用到的 JS 或 Module 甚至是 CSS。output 是打包後的檔案產生位置，filename 為打包後的檔案名稱，path 指定路徑。上方的進入點指定為 src 路徑下的 index.js，因此先建立 src 資料夾及 index.js：
/* 當前專案架構 */
src
|-index.js
package.json
webpack.config.js
開啟 index.js，並輸入一些 JavaScript：
const profile = {
name: '神Ｑ超人',
position: 'Front End Development',
};
console.log(`Hi! My name is ${profile.name}`);
console.log(`position is ${profile.position}`);
打開 package.json，並在其中的 script 中加入新指令：
{
/* 其他省略 */
"scripts": {
"build": "webpack -p"
},
/* 其他省略 */
}
接著在命令提示字元中輸入指令：
npm run build
Webpack 便會開始打包，如果打包工作順利結束，目錄下會多一個 dist 資料夾，內部便是打包後的 JS，使用 node 執行結果也正常：
上方有提過，Webpack 會從進入點開始尋找專案需要的 JS 或 Module ，並打包為一個整理過的 JS，因此我們便不需要再用 CDN 管理哪些套件，並疑惑他們是否真的有使用到，刪除了會不會出錯，
下方舉個例子來驗證這回事。
在 src 下另外建立一個 position 資料夾與其目錄下的 index.js，作為一個 Module：
/* 當前專案架構 */
src
|-position
|-index.js
|-index.js
package.json
webpack.config.js
position/index.js 的內容為：
const position = 'Front End Development';
export default position;
在 src/index.js 中將 positon 的部分都先移除：
const profile = {
name: '神Ｑ超人',
};
console.log(`Hi! My name is ${profile.name}`);
進行打包後，可由結果觀察到，即使 position/index.js 在專案中，但 Webpack 卻略過，因為程式的執行並不需要他：
接下來修改一下 src/index.js：
import position from './position/index.js'
const profile = {
name: '神Ｑ超人',
};
console.log(`Hi! My name is ${profile.name}`);
console.log(`position is ${position}`);
加入 position/index.js 後，Webpack 便能夠從 src/index.js 內找到他，並判斷他是需要的，而加入打包檔案：
透過 Webpack 的打包，會讓專案的 index.html 變得更簡潔，也許今後就再也不會長這樣：
<html>
<body>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<!-- lightgallery.js v1.6.6 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.6/css/lightgallery.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.6/js/lightgallery.min.js"></script>
<!-- 等等可能一堆 -->
</body>
</html>
而是集所有需要套件的 bundle.js：
<html>
<body>
<script src="./bundle.js"></script>
</body>
</html>
文章中的原始碼都會整理在 GitHub 上。
本文簡單描述了 Webpack 的建置，其實沒有想像中那麼難，起手門檻也不高，不需要一次就將它設置到定位，之後我們用漸進式的步調，慢慢將會用到的東西都加進來。
如果文章中有任何問題，再麻煩大家留言告訴我，謝謝！
有件事情我很好奇 ` 這個符號要怎麼樣才按出來?
在鍵盤的 1(ㄅ)，左邊波浪符那顆就是囉
太感謝你了
謝謝幫我回應，也和樓主說聲不好意思，沒有很常看這個平台 
之前在Vue專案內會import蠻多module的 導致整包太大網頁開啟速度一開始會很慢
但是爬文後有個建議方式是改用CDN並用映射的方式 想請問下 會變慢的話還是該選擇CDN的方式吧?
嗯嗯，主要是透過 npm 管理套件和 webpack 打包 JS，就不用在 HTML 上寫下一堆複雜的 script 來源，至於要如何載入可以依照專案的需求來處理！CDN 就是個很棒的方式！
"scripts": {
"build": "webpack -p"
}
是不是需要改成下方呢?
"scripts": {
"build": "webpack b"
}
因為在測試的時候跳出
[webpack-cli] Error: Unknown option '-p'
還是這兩者有差別呢?
想請問神Q大大我要怎麼在VSCode裡面執行webpack的指令，因為一直顯示
「'webpack' 不是內部或外部命令、可執行的程式或批次檔」的訊息。
剛才又嘗試了許多方法，重新刪除再安裝npm i webpack webpack-cli -g，但是發現還是無法解決無法在vscode執行的問題。後來又跑去查看環境變數，很奇妙的是可以在系統或本地的cmd下執行，但是不管怎麼修改就是無法在vscode執行，人生好難QQ，到底是哪裡出錯了。
用npm run build時可以執行，但是webpack本身不能執行，還是我搞錯了什麼。
vs code預設終端應該power shell
所以你把vs code預設終端改成cmd應該就沒問題
我在想啦！有可能是 webpack 的版本更新了，要不要確認看看你裝的版本是多少？
後來發現是因為放置npm global裡面的資料夾位置有問題，重新整理Node and Npm後就沒問題了!
我也有遇到類似的問題，最新版的用"webpack --mode production"解決
iThome鐵人賽
看影片追技術